<style lang="stylus" scoped>

</style>

<template>
  <div>
    <q-card>
      <q-card-section>
        <q-table
          flat bordered dense
          class="bg-white"
          :data="tableConfig.data"
          :columns="tableConfig.columns"
          row-key="id"
          separator="cell"
          selection="multiple"
          :selected.sync="tableConfig.selected"
          :filter="tableConfig.filter"
          :pagination.sync="tableConfig.pagination"
          :rows-per-page-options="[3, 5, 10, 20]"
          no-data-label="暂无数据"
          table-class="h-custom"
          @request="listGet"
        >
          <template v-slot:top-left>
            <q-btn dense flat color="light-blue" label="新增" @click="add"/>
          </template>
          <template v-slot:top-right>
            <q-input borderless dense debounce="300" v-model="tableConfig.filter" placeholder="Search">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </template>
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th>
                <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
              </q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td width="52">
                <q-checkbox dense v-model="props.selected" />
              </q-td>
              <q-td key="action" :props="props">
                <q-btn-dropdown
                  color="blue"
                  size="sm"
                  dense flat
                  menu-anchor="bottom left"
                  menu-self="top left"
                  content-class="text-grey"
                  icon="settings">
                  <q-list dense>
                    <q-item clickable v-close-popup @click="edit(props.row)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="delRow(props.row)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </q-td>
              <q-td key="buyerOrgCode" :props="props">
                <span class="text-light-blue cursor-pointer">{{ props.row.buyerOrgCode  }}</span>
              </q-td>
              <q-td key="buyerOrgName" :props="props">{{ props.row.buyerOrgName }}</q-td>
              <q-td key="paymentTermCode" :props="props">{{ props.row.paymentTermCode }}</q-td>
              <q-td key="currentcyCode" :props="props">{{ props.row.currentcyCode }}</q-td>
              <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
            </q-tr>
            <q-tr v-show="props.expand" :props="props">
              <q-td colspan="100%">
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="props">
            <q-pagination
              v-model="tableConfig.pagination.page"
              color="blue"
              :max="tablePages"
              :input="true"
            />
            共 {{ tableConfig.total }} 条
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <q-dialog
      v-model="addOrEditDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="min-width: 40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>{{ addOrEdit === 1? '新增' : '修改'}}</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="addOrEditDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div :class="$v.addOrEditForm.buyerOrgCode.$error?'text-negative': ''">采购组织编码</div>
              <q-input
                v-model="addOrEditForm.buyerOrgCode"
                error-message="该字段为必填项"
                :error="$v.addOrEditForm.buyerOrgCode.$error"
                @blur="$v.addOrEditForm.buyerOrgCode.$touch"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.addOrEditForm.buyerOrgName.$error?'text-negative': ''">采购组织名称</div>
              <q-input
                v-model="addOrEditForm.buyerOrgName"
                error-message="该字段为必填项"
                :error="$v.addOrEditForm.buyerOrgName.$error"
                @blur="$v.addOrEditForm.buyerOrgName.$touch"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.addOrEditForm.paymentTermCode.$error?'text-negative': ''">付款条件</div>
              <q-input
                v-model="addOrEditForm.paymentTermCode"
                error-message="该字段为必填项"
                :error="$v.addOrEditForm.paymentTermCode.$error"
                @blur="$v.addOrEditForm.paymentTermCode.$touch"
                dense hint/>
            </div>
            <div class="col-12">
              <div :class="$v.addOrEditForm.currentcyCode.$error?'text-negative': ''">货币</div>
              <q-input
                v-model="addOrEditForm.currentcyCode"
                error-message="该字段为必填项"
                :error="$v.addOrEditForm.currentcyCode.$error"
                @blur="$v.addOrEditForm.currentcyCode.$touch"
                dense hint/>
            </div>
          </div>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="saveHandler" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  name: 'PurListView',
  props: {
    id: String
  },
  data () {
    return {
      tableConfig: {
        // 当加入 required: true 属性时  visibleColumns 对当前字段无效
        columns: [
          { name: 'action', label: '操作', align: 'center' },
          { name: 'buyerOrgCode', required: true, label: '采购组织编码', align: 'left', field: 'buyerOrgCode', sortable: true },
          { name: 'buyerOrgName', required: true, label: '采购组织名称', align: 'left', field: 'buyerOrgName', sortable: true },
          { name: 'paymentTermCode', required: true, label: '付款条件', align: 'left', field: 'paymentTermCode', sortable: true },
          { name: 'currentcyCode', required: true, label: '货币', align: 'left', field: 'currentcyCode', sortable: true },
          { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
        ],
        data: [],
        selected: [],
        filter: '',
        total: 0,
        pagination: {
          page: 1,
          rowsPerPage: 5,
          rowsNumber: 5,
          sortBy: '',
          descending: Boolean
        }
      },
      // dialog
      addOrEdit: 1, // 1 新增  2 修改
      loadingSave: false,
      addOrEditDialog: false,
      maximizedToggle: false,
      addOrEditForm: {
        buyerOrgCode: '',
        buyerOrgName: '',
        currentcyCode: '',
        paymentTermCode: ''
      }
    }
  },
  validations: {
    addOrEditForm: {
      buyerOrgCode: { required },
      buyerOrgName: { required },
      currentcyCode: { required },
      paymentTermCode: { required }
    }
  },
  computed: {
    tablePages () {
      return Math.ceil(this.tableConfig.total / this.tableConfig.pagination.rowsPerPage)
    }
  },
  watch: {
    'tableConfig.pagination.page' () {
      this.listGet({
        pagination: this.tableConfig.pagination,
        filter: this.tableConfig.filter
      })
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.listGet({
        pagination: this.tableConfig.pagination,
        filter: this.tableConfig.filter
      })
    },
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/vendorBuyerOrg/query',
        params: {
          vendorId: this.id,
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          buyerOrgName: filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.tableConfig.total = data.total
          this.tableConfig.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.tableConfig.pagination.page = page
      this.tableConfig.pagination.rowsPerPage = rowsPerPage
      this.tableConfig.pagination.sortBy = sortBy
      this.tableConfig.pagination.descending = descending
      this.tableConfig.filter = filter
    },
    add () {
      this.addOrEdit = 1
      this.addOrEditTab = 'tab1'
      this.addOrEditForm = {
        buyerOrgCode: '',
        buyerOrgName: '',
        currentcyCode: '',
        paymentTermCode: ''
      }
      this.$v.addOrEditForm.$reset()
      this.addOrEditDialog = true
    },
    async edit (row) {
      await this.$api({
        method: 'get',
        url: `/mdm/vendorBuyerOrg/findById/${row.id}`,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.addOrEditDialog = true
          this.addOrEditForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.addOrEdit = 2
      this.$v.addOrEditForm.$reset()
    },
    async saveHandler () {
      this.$v.addOrEditForm.$touch()
      if (!this.$v.addOrEditForm.$error) {
        this.loadingSave = true
        await this.$api({
          method: 'put',
          url: this.addOrEdit === 1 ? '/mdm/vendorBuyerOrg/add' : '/mdm/vendorBuyerOrg/update',
          params: {
            vendorId: this.id,
            ...this.addOrEditForm
          },
          emulateJSON: true,
          useNotify: true,
          successCallback: ({ data }) => {
            this.addOrEditDialog = false
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
        this.loadingSave = false
        this.listGet({
          pagination: this.tableConfig.pagination,
          filter: this.tableConfig.filter
        })
      }
    },
    delRow (row) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除供应商：${row.name} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/vendorBuyerOrg/delete/${row.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            console.log(data)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
        this.listGet({
          pagination: this.tableConfig.pagination,
          filter: this.tableConfig.filter
        })
      }).onCancel(() => {

      })
    }
  }
}
</script>
